<template>
  <div>
  <el-popover v-model:visible="showTypePopover"
              :width="width"
              placement="bottom"
              popper-class="no-padding-popover"
              trigger="click">
    <template v-slot:default>
      <div class="type-popper">
        <div class="type-content">
          <div v-for="(item, index) in options" :key="index"
               :class="{ 'selected' : selectType.value == item.value && !showCustomContent}"
               class="type-content-item"
               @click="typeSelectClick(item)">
            <div class="mark"/>
            {{ item.label }}
          </div>
          <div :class="{ 'selected' : showCustomContent}" class="type-content-item" @click="showCustomContent = true">
            <div class="mark"/>
            自定义
          </div>
        </div>
        <div v-if="showCustomContent" class="type-content-custom">
          <el-date-picker v-model="startTime" type="date" style="width:100%;margin-bottom: 5px"
                          value-format="YYYY.MM.DD"
                          placeholder="选择日期"/>
          <el-date-picker v-model="endTime" type="date" style="width:100%;margin-bottom: 5px"
                          value-format="YYYY.MM.DD"
                          placeholder="选择日期"/>
          <el-button @click="customSureClick">确定</el-button>
        </div>
      </div>
    </template>

    <template v-slot:reference>
      <el-input v-model="typeShowValue" :readonly="true" :style="{width: width + 'px'}" class="type-select">
        <template v-slot:suffix>
          <i :class="['el-icon-arrow-up', { 'is-reverse' : showTypePopover}]"/>
        </template>
      </el-input>
    </template>
  </el-popover>
  </div>
</template>

<script setup>
import {ref, watch, onMounted, computed} from "vue"
import {isObject} from '/src/utils/types.js'

defineOptions({
  name: 'TimeTypeSelect',
})

const props = defineProps({
  defaultType: [String, Object],
  // 容器宽度，默认200px
  width: {
    type: [String, Number],
    default: 200
  },
  options: {
    type: Array,
    default: () => {
      return [
        {label: '今天', value: 'today'},
        {label: '昨天', value: 'yesterday'},
        {label: '本周', value: 'week'},
        {label: '上周', value: 'lastWeek'},
        {label: '本月', value: 'month'},
        {label: '上月', value: 'lastMonth'},
        {label: '本季度', value: 'quarter'},
        {label: '上季度', value: 'lastQuarter'},
        {label: '本年', value: 'year'},
        {label: '去年', value: 'lastYear'}
      ]
    }
  } // 数据源 如果存在 替换 默认
})
const emits = defineEmits(['change'])

const selectType = ref({label: '本年', value: 'year'})
const showTypePopover = ref(false)
const showCustomContent = ref(false) // 展示自定义时间内容
const sureCustomContent = ref(false) // 确定

const startTime = ref('')
const endTime = ref('')


const typeShowValue = computed(() => {
  if (sureCustomContent.value) {
    if (startTime.value || endTime.value) {
      return (startTime.value || '') + '-' + (endTime.value || '')
    }
    return ''
  } else {
    return selectType.value.label
  }
})

watch(() => props.defaultType, (count, prevCount) => {
  if (selectType.value.value != props.defaultType) {
    selectType.value = getDefaultTypeValue(props.defaultType)
  }
})


onMounted(() => {
  if (props.defaultType !== undefined) {
    if (typeof props.defaultType === 'string') {
      selectType.value = getDefaultTypeValue(props.defaultType)
    } else if (isObject(props.defaultType)) {
      if (props.defaultType.label) {
        selectType.value = props.defaultType
      } else if (props.defaultType.type == 'default') {
        selectType.value = getDefaultTypeValue(props.defaultType.value)
      } else if (props.defaultType.type == 'custom') {
        sureCustomContent.value = true
        showCustomContent.value = true
        startTime.value = props.defaultType.startTime
        endTime.value = props.defaultType.endTime
      }
    }
  } else {
    emits('change', {type: 'default', value: selectType.value.value})
  }
})


function getDefaultTypeValue(type) {
  for (let index = 0; index < props.options.length; index++) {
    const element = props.options[index]
    if (element.value == type) {
      return element
    }
  }

  return {label: '本年', value: 'year'}
}

// 类型选择
function typeSelectClick(item) {
  showTypePopover.value = false
  sureCustomContent.value = false
  showCustomContent.value = false
  selectType.value = item
  emits('change', {type: 'default', value: selectType.value.value, label: selectType.value.label})
}

// 选择自定义时间 确定
function customSureClick() {
  if (startTime.value && endTime.value) {
    sureCustomContent.value = true
    showTypePopover.value = false

    emits('change', {
      type: 'custom',
      startTime: startTime.value,
      endTime: endTime.value
    })
  }
}
</script>


<style lang="scss" scoped>
:deep(.type-select) {
  margin-right: 15px;

  .el-input__inner {
    height: inherit;
    cursor: pointer;
  }
}

// 时间选择
.type-popper {
  .type-content {
    max-height: 250px;
    overflow-y: auto;

    .type-content-item {
      height: 34px;
      line-height: 34px;
      padding: 0 20px;
      color: #606266;
      position: relative;
      cursor: pointer;

      .mark {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 3px;
        margin-right: 8px;
        background-color: transparent;
      }
    }

    .selected {
      color: $xr-color-primary;
      font-weight: bold;

      .mark {
        background-color: $xr-color-primary;
      }
    }

    .type-content-item:hover {
      background-color: #f5f7fa;
    }
  }

  .type-content-custom {
    padding: 5px 5px 10px 5px;
    position: relative;
    overflow: hidden;

    .el-date-editor {
      width: 100%;
      padding-top: 15px;
      margin-bottom: 18px;
    }

    button {
      margin-top: 5px;
      float: right;
    }
  }
}

.el-icon-arrow-up {
  position: absolute;
  top: 10px;
  right: 5px;
  color: #c0c4cc;
  font-size: 14px;
  transition: transform .3s;
  transform: rotate(180deg);
  cursor: pointer;
}

.el-icon-arrow-up.is-reverse {
  transform: rotate(0deg);
}
</style>
